<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 mt10">
            <!--导航-->
            <el-row>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path:'/role'}">角色管理</el-breadcrumb-item>
                    <el-breadcrumb-item>{{menuName}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-row>

            <el-row>
                <el-col align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <el-button type="primary" @click="savaRoleFn">保存</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button type="danger" @click="setFunctionTree">重置</el-button>
                    </div>
                </el-col>
            </el-row>


            <el-form label-position="left" label-width="80px" ref="baseform" v-model="role">

                <!--基本信息-->
                <el-row>
                    <el-col align="left">
                        <h1>基本信息</h1>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="4">
                        <div class="dlblock-mb20 mt40 mb30 ml20">
                            <el-form-item label="角色名称" prop="name">
                                <el-input v-model.trim="role.name" size="medium"
                                          placeholder="角色名称" style="width: 150px;"
                                          :maxlength="10"
                                          show-word-limit clearable required>
                                </el-input>
                            </el-form-item>
                        </div>

                    </el-col>
                    <el-col :span="6">
                        <div class="dlblock-mb20 mt40 mb30">
                            <el-form-item label="备注" prop="remark">
                                <el-input v-model.trim="role.remarks" size="medium"
                                          placeholder="备注" style="width: 240px;"
                                          :maxlength="20"
                                          show-word-limit clearable>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="dlblock-mb20 mt50 mb30">
                            <label class="mr20">状态</label>
                            <el-radio-group v-model="role.disabled">
                                <el-radio :label="0">已启用</el-radio>
                                <el-radio :label="1">已禁用</el-radio>
                            </el-radio-group>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-row>
                <el-col :span="8">
                    <!--平台权限-->
                    <el-row>
                        <el-col align="left">
                            <h1>平台权限</h1>
                        </el-col>
                    </el-row>
                    <el-row class="mt20">
                        <el-col :span="24" :push="1">
                            <el-transfer
                                    @change="getFunctionTreeFn(1, $event)"
                                    :titles="['未选平台', '已选平台']"
                                    v-model="checkPlatformList"
                                    :data="platformList"
                                    :props="{ key: 'objectId', label: 'objectName' }">
                            </el-transfer>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8" :offset="1">
                    <!--账号角色-->
                    <el-row>
                        <el-col align="left">
                            <h1>账号角色</h1>
                        </el-col>
                    </el-row>
                    <el-row class="mt20">
                        <el-col :span="24" :push="1">
                            <el-transfer
                                    filterable
                                    :titles="['未选账号', '已选账号']"
                                    v-model="checkAccountList"
                                    :data="accountList"
                                    :props="{ key: 'id', label: 'loginId' ,disabled: 'disabled'}">
                            </el-transfer>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>


            <!--权限分配-->
            <el-row>
                <el-col align="left">
                    <h1>权限分配</h1>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" :push="1">
                    <div class="function-box">
                        <el-tree ref="functionTree" :data="functionTree" show-checkbox node-key="id"
                                 :props="{ label: 'name', children: 'items'}">
                        </el-tree>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        saveRole,
        addRole,
        updateRole,
        getPlatformIds,
        getMenuIds,
        getUserDataByToken,
        getAdminNoRoleInfo
    } from "@/api"

    export default {
        name: "index",
        data() {
            return {
                platformList: [
                    {
                        "objectId": 1,
                        "objectName": "基础数据系统"
                    },
                    {
                        "objectId": 2,
                        "objectName": "运营管理系统"
                    },
                    {
                        "objectId": 3,
                        "objectName": "客流统计系统"
                    },
                    {
                        "objectId": 4,
                        "objectName": "视频监控系统"
                    },
                ],
                checkPlatformList: [],
                checkAccountList: [],
                accountList: [],
                // 菜单ID集合
                menuIdsP: [],
                // 菜单ID集合
                platformIdsP: [],
                functionTree: [],
                mainMenu: {
                    "items": [],
                    "href": "",
                    "html": '',
                    "id": '',
                    "name": "",
                    "parentId": '',
                    "qualifiedName": "",
                    "title": "el-icon-sunrise-1",
                    "value": ''
                },
                role: {
                    name: '',
                    remarks: '',
                    disabled: '',
                },
                menuName: '',
                savaFlag: 0,
                loading: false,
                //验证规则
                // rules: {
                //     // name: [
                //     //     {required: true, message: '角色名不能为空', trigger: 'blur'},
                //     // ],
                // },

            }
        },
        async created() {
            // 添加角色 编辑角色
            if (this.$route.query.menuName != null) {
                this.menuName = this.$route.query.menuName
                if (this.menuName == "编辑角色") {
                    this.savaFlag = 1
                }
            }
            // 编辑角色
            if (this.$route.query.role != null) {
                this.role = this.$route.query.role

                //已有成员
                this.checkAccountList = this.role.accounts

                // 获取该角色所拥有的系统信息 已选平台
                var roles = []
                if (this.role.members instanceof Array) {
                    roles = this.role.members
                    roles.push(this.role.id)
                } else {
                    roles[0] = this.role.id
                }

                // 获取未绑定当前角色的账号集合
                await getAdminNoRoleInfo({id: this.$route.query.role.id}).then(res => {
                    if (res != null && res.code == 200) {
                        this.accountList = res.data
                    }
                })

                // 获取已经拥有的菜单集合
                await getMenuIds({roleIds: roles}).then(res => {
                    if (res != null && res.code == 200) {
                        this.menuIdsP = res.data
                    }
                })

                // 获取已经拥有的平台集合
                await getPlatformIds({roleIds: roles}).then(res => {
                    if (res != null && res.code == 200) {
                        this.checkPlatformList = res.data
                        // 获取functionTree值
                        this.getFunctionTreeFn(2, this.checkPlatformList)
                    }
                })
            } else {
                this.getFunctionTreeFn(1, []);
                // 获取未绑定当前角色的账号集合
                await getAdminNoRoleInfo({id: 0}).then(res => {
                    if (res != null && res.code == 200) {
                        this.accountList = res.data
                    }
                })
            }
        },
        mounted() {
        },
        methods: {
            setFunctionTree() {
                this.$refs.functionTree.setCheckedKeys(this.menuIdsP)
            },
            // 保存角色
            savaRoleFn() {
                this.loading = true
                let platformIds = this.checkPlatformList
                let menuIds = this.$refs.functionTree.getCheckedKeys();
                if (this.savaFlag) {
                    this.updateRoleFn(platformIds, menuIds)
                } else {
                    this.addRoleFn(platformIds, menuIds)
                }
            },

            getName(type) {
                switch (type) {
                    case 1: {
                        return '基础数据系统'
                    }
                    case 2: {
                        return '运营管理系统'
                    }
                    case 3: {
                        return '客流统计系统'
                    }
                    case 4:
                        return '视频监控系统';
                    default:
                        break;
                }
                return undefined;
            },

            // 添加子菜单
            async addSubMenu(type) {
                let res = await getUserDataByToken({
                    type: type
                })
                this.functionTree[type].items = res.data
            },


            async getFunctionTreeFn(t, val) {
                if (!val.length) {
                    this.functionTree = [];
                    return 0;
                }
                this.functionTree = []
                for (let i = 0; i < val.length; i++) {
                    let mainMenu = JSON.parse(JSON.stringify(this.mainMenu))
                    mainMenu.name = this.getName(val[i])
                    mainMenu.id = val[i]
                    await getUserDataByToken({
                        type: val[i]
                    }).then(res => {
                        mainMenu.items = res.data
                        this.functionTree.push(mainMenu)
                        if (t == 2) {
                        }
                    })
                }
                this.$refs.functionTree.setCheckedKeys(this.menuIdsP)
            },
            // 保存角色信息
            saveRoleFn() {
                saveRole(this.role).then(res => {
                    if (res != null && res.code == 200) {
                        this.$message.success("保存成功")
                        this.$router.push('/role')
                        this.$store.dispatch('tagsView/delView', {path: '/role/edit'})
                    }
                })
            },

            addRoleFn(platformIds, menuIds) {
                console.log(this.checkAccountList)
                addRole({
                    roleName: this.role.name,
                    members: this.checkAccountList,
                    remarks: this.role.remarks,
                    disabled: this.role.disabled,
                    platformIds,
                    menuIds,

                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.$message.success("添加成功")
                        this.$router.push("/role")
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            updateRoleFn(platformIds, menuIds) {
                updateRole({
                    roleName: this.role.name,
                    roleId: this.role.id,
                    members: this.checkAccountList,
                    remarks: this.role.remarks,
                    disabled: this.role.disabled,
                    platformIds,
                    menuIds,
                }).then(res => {

                    if (res != null && res.code == 200) {
                        this.$message.success("更新成功")
                        this.$router.push("/role")
                        this.$store.dispatch('tagsView/delView', {path: '/role/edit'})
                    }
                }).finally(() => {
                    this.loading = false
                })
            }
        },
    }
</script>

<style scoped>
    .title {
        style: "line-height: 40px";
        font-weight: bold;
        margin-bottom: 20px;
    }

    .function-box {
        margin-top: 15px;
        width: 100%;
        height: 200px;

        border: 1px solid #ebeef5;
        overflow: auto;
    }

    .input-text > input {
        text-align: center;
    }

    .select-text input {
        text-align: center;
    }
</style>
